<template>
  <div>
    <h1>路由传值</h1>
    <h2>path跳转</h2>
    <!--
          query
             传： this.$router.push('/xxx?参数名=值')
                  this.$router.push({
                    path:'/xxx',
                    query:{
                      参数名:值,
                      ...
                    }
                  })
             收：this.$route.query.参数名
          params:动态路由匹配
             配制路由
                {
                  path:'/xxx/:id?',
                  。。。
                }
             传：this.$router.push('/xxx/123')
             收:this.$route.params.id
          -->
    <h2>name跳转</h2>
    <!-- query
                传：this.$router.push({name:'Xxx',query:{参数名:值}})
                收:this.$route.query.参数名
         params:
             缺点：刷新数据就没有了，因为它的值存储在内存中
             优点：通过url存储数据它有长度限制，数据类型限制
               传：this.$router.push({name:'Xxx',params:{参数名:值}})
               收：this.$route.params.参数名
         -->

    <button @click="btnClick">跳转到工资页query</button>
    <button @click="btnClick2">跳转到工资页params</button>
  </div>
</template>
<script>
export default {
  methods: {
    btnClick() {
      this.$router.push({
        name: 'Salarys',
        query: {
          money: 1000
        }
      })
    },
    btnClick2() {
      this.$router.push({
        name: 'Salarys',
        params: {
          num: 999
        }
      })
    }
  }
}
</script>
<style></style>
